<template>
	<!-- 发布上架和编辑车品，都公用此页面-->
	<view class="add-edit-cargoods">
		<!-- 表单容器 -->
		<view class="form-box">
			<!-- 上架店铺 -->
			<view class="form-item store-box flex flex-jc-sb">
				<text>上架店铺</text>
				<text>{{ $store.state.userInfoDetail.store.storeName }}</text>
			</view>

			<!-- 车品分类 -->
			<view class="goods-category mt-20">
				<!-- 车品属性 -->
				<view class="tips">
					<view class="font-30 color-999">商品属性</view>
					<text class="font-24 color-999">错误填写商品属性，可能会影响商品下架或搜索流量</text>
				</view>

				<!-- 车品分类内容 -->
				<view class="form-item flex flex-jc-sb content">
					<text>车品分类</text>
					<view class="content-right" @click="getCategory()">
						<text>{{ formData.car_Supplie_Type_Name }}</text>
						<u-icon name="arrow-right" size="24rpx"></u-icon>
					</view>
				</view>
			</view>

			<!-- 品牌和型号 -->
			<view class="form-item cargoods-brand-no">
				<view class="row flex flex-jc-sb flex-ai-c">
					<view class="left flex flex-jc-sb flex-ai-c">
						<text class="font-30">品牌</text>
						<input v-model="formData.name" type="text" placeholder="请输入车品品牌" placeholder-style="font-size: 30rpx; color: #999;" />
					</view>
					<!-- 清空图标，叉叉 -->
					<view @click="formData.name = ''"><i-icon icon="iconquxiaoxunjia" size="36rpx" color="#E1E1E1"></i-icon></view>
				</view>
				<view class="row flex flex-jc-sb flex-ai-c">
					<view class="left flex flex-jc-sb flex-ai-c">
						<text class="font-30">型号</text>
						<input v-model="formData.type_Name" type="text" placeholder="请输入车品型号" placeholder-style="font-size: 30rpx; color: #999;" />
					</view>
					<!-- 清空图标，叉叉 -->
					<view @click="formData.type_Name = ''"><i-icon icon="iconquxiaoxunjia" size="36rpx" color="#E1E1E1"></i-icon></view>
				</view>
			</view>

			<!-- 适配的车型 -->
			<view class="form-item car-type">
				<view class="title-oper flex flex-jc-sb flex-ai-c">
					<text class="color-999 font-30">适配车型</text>
					<view class="right-btn flex flex-ai-c" @click="addCarType()">
						<text class="font-30 color-333">设置添加</text>
						<i-icon icon="icontianjia1" size="36rpx" color="#FBB000"></i-icon>
					</view>
				</view>

				<!-- 车型列表 - 显示全部 -->
				<view v-show="carTypeMore" class="car-list">
					<view v-for="(item, index) in carTypeList" :key="index" class="item flex flex-jc-sb flex-ai-c">
						<view class="content">{{ item.name }}</view>
						<view @click="removeCarType(item, index)"><i-icon icon="iconquxiaoxunjia" size="36rpx" color="#E1E1E1"></i-icon></view>
					</view>
				</view>

				<!-- 车型列表 - 显示2个 -->
				<view v-show="!carTypeMore" class="car-list">
					<view v-for="(item, index) in carTypeList.slice(0, 2)" :key="index" class="item flex flex-jc-sb flex-ai-c">
						<view class="content">{{ item.name }}</view>
						<view @click="removeCarType(item, index)"><i-icon icon="iconquxiaoxunjia" size="36rpx" color="#E1E1E1"></i-icon></view>
					</view>
				</view>

				<!-- 查看更多 -->
				<view v-show="carTypeList.length > 2" class="read-more" @click="carTypeMore = !carTypeMore">
					<text class="color-666 font-26 mr-10">{{ carTypeMore ? '点击收起' : '查看更多' }}</text>
					<u-icon name="arrow-down" color="#999" size="22rpx"></u-icon>
				</view>
			</view>

			<!-- 备注 -->
			<view class="form-item remark flex flex-jc-sb flex-ai-fs">
				<text>备注</text>
				<view class="remark-input"><u-input v-model="formData.remark" type="textarea" placeholder="请输入" :height="80" auto-height /></view>
			</view>

			<!-- 车品图片 -->
			<view class="car-imgs-box mt-20">
				<!-- 标题 -->
				<view class="title-box color-999">
					<text class="font-30">车品图片</text>
					<text class="font-26">(最多5张)</text>
				</view>
				<!-- 上传外观图，有背景色的容器 -->
				<view class="form-item img-content">
					<view class="label-box flex flex-jc-sb">
						<text class="font-30 color-666">上传外观图</text>
						<view v-show="carImgList.length !== 0" class="btn-del" @click="removeImg()">
							<text class="color-999 font-26">删除</text>
							<i-icon icon="iconlajitong" color="#999999" size="30rpx"></i-icon>
						</view>
					</view>

					<!-- 图片，上传、预览 -->
					<view class="img-list flex flex-wrap-w">
						<view v-for="(item, i) in carImgList" :key="i" class="img" :class="carImgList.length > 3 ? 'mr-auto' : 'mr-12'" @click="previewImg(i)">
							<image :src="item.img"></image>
						</view>

						<!-- 上传图片按钮 -->
						<view v-show="carImgList.length !== 5" class="btn-upload" @click="uploadImg()">
							<image src="https://files.yzsheng.com/bussiness/imgs/shangchuantp.png" mode="aspectFill"></image>
							<!-- <i-icon icon="iconshangchuan" size="124rpx" color="#E1E1E1"></i-icon> -->
						</view>
					</view>
				</view>

				<!-- 预览图片 -->
				<i-preview-image v-model="previewImgs" :preview.sync="previewImageShow" :index.sync="imgIndex"></i-preview-image>
			</view>

			<!-- 价格 & 库存 -->
			<view class="price-form">
				<view class="title-box font-30 color-999">价格&库存</view>
				<view class="form-item">
					<view class="row flex flex-ai-c flex-jc-sb">
						<view class="width-35 color-666 font-30">商品原价</view>
						<view class="width-65 flex   stock">
							<view class="width-85 color-333 u-text-right" @click="setType('original_Price')">
								<text :class="formData.original_Price ? 'color-333' : 'color-999'">{{ formData.original_Price ? formData.original_Price : '请输入金额' }}</text>
							</view>
							<view class="width-15 color-EB5C02 font-30 u-text-right">元</view>
						</view>
					</view>
					<view class="row flex flex-ai-c flex-jc-sb">
						<view class="width-35 color-666 font-30">商家端销售价格</view>
						<view class="width-65 flex   stock">
							<view class="width-85 color-333 u-text-right" @click="setType('b_Price')">
								<text :class="formData.b_Price ? 'color-333' : 'color-999'">{{ formData.b_Price ? formData.b_Price : '请输入金额' }}</text>
							</view>
							<view class="width-15 color-EB5C02 font-30 u-text-right">元</view>
						</view>
					</view>
					<view class="row flex flex-ai-c flex-jc-sb">
						<view class="width-35 color-666 font-30">消费端销售价格</view>
						<view class="width-65 flex   stock">
							<view class="width-85 color-333 u-text-right" @click="setType('c_Price')">
								<text :class="formData.c_Price ? 'color-333' : 'color-999'">{{ formData.c_Price ? formData.c_Price : '请输入金额' }}</text>
							</view>
							<view class="width-15 color-EB5C02 font-30 u-text-right">元</view>
						</view>
					</view>
					<view class="row flex flex-ai-c flex-jc-sb">
						<view class="width-35 color-666 font-30">库存</view>
						<view class="width-65 flex   stock">
							<view class="width-85 color-333 u-text-right" @click="setType('count')">
								<text :class="formData.count ? 'color-333' : 'color-999'">{{ formData.count ? formData.count : '请输入库存' }}</text>
							</view>
							<view class="width-15 color-EB5C02 font-30 u-text-right">件</view>
						</view>
					</view>
				</view>
			</view>

			<u-keyboard
				ref="uKeyboard"
				mode="number"
				:dot-enabled="keys === 'count' ? false : true"
				:mask-close-able="false"
				v-model="keystatus"
				@confirm="blurMoney"
				@backspace="backspace"
				@change="getmyquotation"
			></u-keyboard>
			<!-- 物流信息 -->
			<view class="logistics-info">
				<view class="title-box font-30 color-999">物流信息</view>
				<view class="form-item">
					<view class="row flex flex-ai-c flex-jc-sb">
						<text class="color-666 font-30">运费设置</text>
						<view @click="shippingSettingShow = true">
							<text class="color-999 font-26">{{ shippingSettingLabel[formData.freight_Type] }}</text>
							<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
						</view>
					</view>
					<view class="row flex flex-ai-c flex-jc-sb">
						<text class="color-666 font-30">可配送区域</text>
						<view @click="areaShow = true">
							<text class="color-999 font-26">{{ formData.delivery_Region_Name || '请选择' }}</text>
							<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
						</view>
					</view>
					<view class="row flex flex-ai-c flex-jc-sb">
						<text class="color-666 font-30">发货地</text>
						<view @click="deliveryAddressShow = true">
							<text class="color-999 font-26">{{ formData.send_Region_Name || '请选择' }}</text>
							<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 固定在底部的上架按钮 -->
		<view class="btn-box">
			<!-- 发布上架 -->
			<view v-if="typeStatus === 'add'" @click="submit()" class="btn-add">
				<i-button text="上架出售" shape="circle" color="#333" :bg-color="btnSubmit ? 'linear-gradient(-90deg, #FBD220, #FFE23E)' : '#eee'" class="btn"></i-button>
			</view>

			<!-- 编辑保存 -->
			<view v-else class="btn-edit">
				<i-button text="删除" shape="circleLeft" color="#FFE23E" bg-color="#333" class="btn" @click.native="updateCarGoods(1, '删除')"></i-button>
				<i-button v-if="editFormData.added_Status" text="上架" color="#FFE23E" bg-color="#333" class="btn" @click.native="updateCarGoods(2, '上架')"></i-button>
				<i-button v-else text="下架" color="#FFE23E" bg-color="#333" class="btn" @click.native="updateCarGoods(0, '下架')"></i-button>
				<i-button text="保存" shape="circleRight" color="#333" class="btn" @click.native="submit()"></i-button>
			</view>
		</view>

		<!-- 底部弹出框部分 -->
		<!-- 运费设置 - 底部弹出框 -->
		<u-popup v-model="shippingSettingShow" mode="bottom" border-radius="30" :mask-close-able="false">
			<view class="shipping-setting">
				<view class="popup-title">运费设置</view>
				<view class="content">
					<!-- 单选 -->
					<view class="radio-box">
						<view class="row flex flex-ai-c" @click="checkedFreight(0)">
							<i-icon :icon="formData.freight_Type === 0 ? 'icondanxuan' : 'icontuoyuan'" size="40rpx" :color="formData.freight_Type === 0 ? '#fbb000' : '#999'"></i-icon>
							<text>默认包邮</text>
						</view>
						<view class="row flex flex-ai-c" @click="checkedFreight(1)">
							<i-icon :icon="formData.freight_Type === 1 ? 'icondanxuan' : 'icontuoyuan'" size="40rpx" :color="formData.freight_Type === 1 ? '#fbb000' : '#999'"></i-icon>
							<text>到付</text>
						</view>
						<view class="row flex flex-ai-c" @click="checkedFreight(2)">
							<i-icon :icon="formData.freight_Type === 2 ? 'icondanxuan' : 'icontuoyuan'" size="40rpx" :color="formData.freight_Type === 2 ? '#fbb000' : '#999'"></i-icon>
							<text>默认不包邮</text>
						</view>
					</view>
					<!-- 输入运费 -->
					<view v-show="formData.freight_Type === 2" class="freight flex flex-ai-c flex-jc-c">
						<text>邮费</text>
						<input type="number" v-model="formData.freight" placeholder="请输入邮费金额" placeholder-style="font-size: 30rpx;" />
						元
					</view>

					<!-- 完成按钮 -->
					<view class="btn-success"><i-button text="完成" color="#333" shape="circle" class="btn" @click.native="shipSettingOk()"></i-button></view>
				</view>
			</view>
		</u-popup>

		<!-- 可配送区域 - 底部弹出框 -->
		<u-popup v-model="areaShow" mode="bottom" border-radius="30">
			<view class="area-popup">
				<view class="popup-title">可配送区域</view>

				<scroll-view scroll-y="true" :scroll-into-view="areaId" scroll-with-animation class="scroll-area">
					<view class="area-content flex flex-dir-c">
						<!-- 定位 -->
						<view class="location-item" id="jin">
							<view class="font-30 color-666">定位地址</view>
							<view class="location-active" @click="checkedArea(province)">{{ province.name }}</view>
						</view>

						<!-- 列表 -->
						<view class="area-list">
							<!-- 不限制项 -->
							<view class="item stint-item" @click="checkedArea({ name: '不限制区域', id: 123456789 })">不限制区域</view>

							<view v-for="(item, index) in areaList" :id="item.letter" :key="index">
								<view class="item">{{ item.letter }}</view>
								<view v-for="(area, index) in item.data" :key="index" class="item" @click="checkedArea(area)">{{ area.name }}</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- 字母索引列表 -->
				<view class="letter-list">
					<view class="item" @click="areaId = 'jin'">近</view>
					<view v-for="(letter, i) in letterListstr" :data-id="letter" :key="i" class="item" @click="areaId = letter">{{ letter }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 发货地 - 底部弹出框 -->
		<u-popup v-model="deliveryAddressShow" mode="bottom" border-radius="30">
			<view class="area-popup delivery-address">
				<view class="popup-title">发货地</view>

				<scroll-view scroll-y="true" :scroll-into-view="areaId" scroll-with-animation class="scroll-area">
					<view class="area-content flex flex-dir-c">
						<!-- 定位 -->
						<view class="location-item" id="jin">
							<view class="font-30 color-666">定位地址</view>
							<view class="location-active" @click="checkedAddress(city)">{{ city.name }}</view>
						</view>

						<!-- 列表 -->
						<view class="area-list">
							<view v-for="(item, index) in deliveryAddressList" :id="item.letter === '#' ? 'Aa' : item.letter" :key="index">
								<view class="item">{{ item.letter }}</view>
								<view v-for="(area, index) in item.data" :key="index" class="item" @click="checkedAddress(area)">{{ area.name }}</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- 字母索引列表 -->
				<view class="letter-list">
					<view class="item" @click="areaId = 'jin'">近</view>
					<view v-for="(letter, i) in letterListstr" :data-id="letter" :key="i" class="item" @click="areaId = letter === '#' ? 'Aa' : letter">{{ letter }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 发布上架成功弹框 -->
		<u-popup v-model="submitSuccessShow" mode="center" border-radius="30" width="400" :mask-close-able="false">
			<!-- 完成报价弹窗 -->
			<view class="successPoup">
				<view class="top"><image src="/static/img/accessory/success.png"></image></view>
				<view class="main">
					<view class="title">车品发布成功</view>
					<view class="con">恭喜您，车品发布成功</view>
					<view class="btn" @click="goPage">我知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script src="./addEditCarGoods.js"></script>

<style lang="scss" scoped>
@import './addEditCarGoods.scss';
</style>
